<template>
  <div>
    <!-- <div class="bg_grey_all"></div> -->
    <van-row gutter="20" class="title_left">
      <van-col span="8" style="padding-top: 45px">
        <a @click="back" class="back_a" style="color: white; margin-left: 10px">
          返回
        </a>
      </van-col>
      <van-col
        span="8"
        style="text-align: center; color: white; padding-top: 45px"
        >车辆处置</van-col
      >
      <van-col span="8"></van-col>
    </van-row>
    <van-row class="topMargin">
      <van-col span="24">
        <van-cell>
          <template #icon>
            <div>
              <van-image
                style="width: 120px; height: 80px; max-width: 100%"
                :src="require('../../../../assets/images/car_1.jpeg')"
              />
            </div>
          </template>
          <template #title>
            <div style="margin-left: 5px">
              <div style="font-size: 14px; color: #949494">
                {{ vehicle.vehicleBrand.brandName }} -
                {{ vehicle.vehicleSeries.seriesName }}({{
                  vehicle.vehicleColor
                }})
              </div>
              <div style="font-size: 16px">
                <van-tag v-if="vehicle.vehicleType === 1" type="primary"
                  >试</van-tag
                >
                <van-tag v-else-if="vehicle.vehicleType === 2" type="primary"
                  >客</van-tag
                >
                <van-tag v-else-if="vehicle.vehicleType === 3" type="primary"
                  >救</van-tag
                >
                <van-tag v-else type="primary">{{
                  vehicle.vehicleType
                }}</van-tag>
                {{ vehicle.plateNum }}
              </div>
              <div>VIN号:{{ vehicle.vinNo }}</div>
              <!-- <div>{{vehicle.company.companyName}}</div> -->
            </div>
          </template>
        </van-cell>
      </van-col>
    </van-row>
    <van-row>
      <van-col span="24">
        <van-cell title="车辆处置确认" class="bg_grey" />
        <van-form>
          <!-- 用途 -->
          <van-field
            readonly
            clickable
            name="picker"
            :value="handleType"
            label="车辆处置方式"
            placeholder="点击选择车辆处置方式"
            @click="show_handleType_list = true"
          />
          <van-popup v-model="show_handleType_list" position="bottom">
            <van-picker
              show-toolbar
              :columns="handleType_list"
              @confirm="onHandleTypeSelected"
              @cancel="show_handleType_list = false"
            />
          </van-popup>

          <van-field
            v-model="message"
            rows="2"
            autosize
            label="操作备注"
            type="textarea"
            maxlength="200"
            placeholder="请输入备注"
            show-word-limit
          />

          <van-field name="checkbox" label="车牌处置方式">
            <template #input>
              <van-checkbox v-model="checkbox" shape="square" />作废(注销/归还)
            </template>
          </van-field>

          <van-cell>
            <div style="color:#666666;font-size:14px">
            <div>操作说明：</div>

            <div>
              1. “删除错误车辆信息”仅可用于未产生任何车辆数据的新建车辆信息。
            </div>

            <div>
              2.
              “同时作废车牌”意思是处置车辆同时，归还或注销不再继续使用的车牌号。
            </div>
            </div>
          </van-cell>

          <div style="margin: 16px">
            <van-button block type="primary" @click="commit">提交</van-button>
          </div>
        </van-form>
      </van-col>
    </van-row>
  </div>
</template>

<script>
import { Api } from "../../../../api/api_config";
import { Toast } from 'vant'

export default {
  data() {
    return {
      vehicle: {},
      currentUser: {},
      show_handleType_list: false,
      handleType: "",
      handleType_list: [
        { text: "车辆售出", id: 3 },
        { text: "厂家召回", id: 4 },
        { text: "报废处理", id: 5 },
        { text: "删除错误车辆信息", id: 2 },
      ],
      checkbox: false,
      message: '',
      disposeType: 0
    };
  },
  created() {
    this.initData();
  },
  mounted() {},
  methods: {
    initData() {
      this.$store.state.tab_show = false
      this.vehicle = this.$store.state.vehicle
      this.currentUser = this.$store.state.configuration.currentUser
    },
    back() {
      this.$router.push("/carUsage/carManage")
    },
    onHandleTypeSelected(value) {
      this.handleType = value.text
      this.disposeType = value.id
      this.show_handleType_list = false
    },
    commit() {

      let that = this
      let dispose = {
        id: this.vehicle.id,
        memo: this.message,
        disposeType: this.disposeType,
        isPlatedDisposed: this.checkbox
      }
      this.$axios({
            method: Api.Vehicle.dispose.method,
            url: Api.Vehicle.dispose.url,
            data: dispose
          })
        .then(function () {
          Toast.success('处置成功')
          that.$router.push("/carUsage/carManage")
        })
        .catch(function (error) {
          console.log(error);
        });
    }
  },
};
</script>

<style scoped>
</style>
